<!doctype html>
<html lang="zh-Hans">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="hugo-theme" content="Axiom 0.7.1">



  <link rel="icon" type="image/png" sizes="32x32" href="/blog/">
  <link rel="icon" type="image/x-icon" href="/blog/">
  <link rel="apple-touch-icon" href="/blog/">
  <link rel="canonical" href="https://Mia-zhao.github.io/blog/posts/css-%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%932/">
<link rel="preload" as="style" href="/blog/bundle.css?v=1598028633" media="all">
<link rel="stylesheet" href="/blog/bundle.css?v=1598028633" media="all">
<style>.cdata pre{color:#edf2f7;background-color:#2d3748}.cdata :not(pre)>code{color:#805ad5;background-color:#f7fafc}.chroma .err{color:#fed7d7;background-color:#9b2c2c}.chroma .hl{background-color:#4a5568}.chroma .ln{color:#a0aec0}.chroma .k,.chroma .kc,.chroma .kd,.chroma .kn,.chroma .kp,.chroma .kr{color:#63b3ed}.chroma .kt{color:#b794f4}.chroma .na{color:#f6e05e}.chroma .nb{color:#f6ad55}.chroma .nc{color:#fc8181}.chroma .no{color:#68d391}.chroma .nd{color:#fc8181}.chroma .ne{color:#fc8181}.chroma .nf{color:#f6ad55}.chroma .nt{color:#fc8181}.chroma .l{color:#b794f4}.chroma .dl,.chroma .ld,.chroma .s,.chroma .s2,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .sd{color:#68d391}.chroma .se{color:#a0aec0}.chroma .s1,.chroma .sh,.chroma .si,.chroma .sr,.chroma .ss,.chroma .sx{color:#68d391}.chroma .il,.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo{color:#b794f4}.chroma .o,.chroma .ow{color:#90cdf4}.chroma .p{color:#cbd5e0}.chroma .c,.chroma .c1,.chroma .ch,.chroma .cm,.chroma .cp,.chroma .cpf,.chroma .cs{color:#a0aec0}.chroma .ge{font-style:italic}.chroma .gs{font-weight:700}</style>

<link rel="preload" as="image" href="/blog/images/Cover3.jpg">

<title>CSS 知识总结2 : Mia&#39;s Blog Posts</title>

<meta property="og:title" content="CSS 知识总结2">
<meta property="og:site_name" content="Mia&#39;s Blog Posts">
<meta property="og:url" content="https://Mia-zhao.github.io/blog/posts/css-%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%932/">
<link rel="image_src" href="https://Mia-zhao.github.io/blog/images/Cover3.jpg">
<meta property="og:image" content="https://Mia-zhao.github.io/blog/images/Cover3.jpg">
<meta property="og:image:width" content="">
<meta property="og:image:height" content="">
<meta property="og:type" content="article">
<meta property="og:locale" content="zh_Hans">
<meta property="og:description" content="这篇博文主要为了个人学习目的，内容包括CSS定位，层叠上下文，浏览器渲染原理以及动画 (transition, animation)。 1 定位 文档流和盒模型讨论的是二维平面的布局，定位讨论的是垂直于平面的z-axis布局。从上到下（或者人眼俯视屏幕的方向）分别是： 内联子元素 浮动元素 块级子元素 边框 背景 position的默认值是static, 其余值有： relative: 配合absolute/z-index使用 absolute: 相对于祖先中最近一个定位元素（非static）定位 有些浏览器若没有top left会错乱 注意善用百分值和负margin定位 fixed: 相对于viewport 特殊属性除外（transform） sticky: 不常用 2 层叠上下文 元素在z轴的顺序由z-index影响，然而不是由z-index的值决定，应在层叠上下文(stacking context)中考虑。 以下是常见层叠上下文的形成： 根元素html position为absolute或relative并且z-index值不为auto opacity小于1 position为fixed或sticky transform不为none 注：参考 stacking context 考虑层叠上下文时注意： 每个层叠上下文是新的context 处在同一context才能比较 3 浏览器渲染原理 3.1 渲染步骤 浏览器渲染分为六个步骤： 构建DOM 构建CCSOM 合并成渲染树(render-tree) layout paint composite 注：参考 https://csstriggers.com了解CSS特性触发的浏览器渲染过程">
<meta name="description" content="这篇博文主要为了个人学习目的，内容包括CSS定位，层叠上下文，浏览器渲染原理以及动画 (transition, animation)。 1 定位 文档流和盒模型讨论的是二维平面的布局，定位讨论的是垂直于平面的z-axis布局。从上到下（或者人眼俯视屏幕的方向）分别是： 内联子元素 浮动元素 块级子元素 边框 背景 position的默认值是static, 其余值有： relative: 配合absolute/z-index使用 absolute: 相对于祖先中最近一个定位元素（非static）定位 有些浏览器若没有top left会错乱 注意善用百分值和负margin定位 fixed: 相对于viewport 特殊属性除外（transform） sticky: 不常用 2 层叠上下文 元素在z轴的顺序由z-index影响，然而不是由z-index的值决定，应在层叠上下文(stacking context)中考虑。 以下是常见层叠上下文的形成： 根元素html position为absolute或relative并且z-index值不为auto opacity小于1 position为fixed或sticky transform不为none 注：参考 stacking context 考虑层叠上下文时注意： 每个层叠上下文是新的context 处在同一context才能比较 3 浏览器渲染原理 3.1 渲染步骤 浏览器渲染分为六个步骤： 构建DOM 构建CCSOM 合并成渲染树(render-tree) layout paint composite 注：参考 https://csstriggers.com了解CSS特性触发的浏览器渲染过程">
<meta property="og:updated_time" content="2020-08-06T08:59:00Z">
<meta property="fb:app_id" content="">
<meta name="author" content="Mia Zhao">
<meta property="article:author" content="https://Mia-zhao.github.io/blog/">
<meta property="article:published_time" content="2020-08-06T08:59:00Z">
<meta property="article:modified_time" content="2020-08-06T08:59:00Z">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "CSS 知识总结2",
  "alternativeHeadline": "这篇博文主要为了个人学习目的，内容包括CSS定位，层叠上下文，浏览器渲染原理以及动画 (transition, animation)。 1 定位 文档流和盒模型讨论的是二维平面的布局，定位讨论的是垂直于平面的z-axis布局。从上到下（或者人眼俯视屏幕的方向）分别是： 内联子元素 浮动元素 块级子元素 边框 背景 position的默认值是static, 其余值有： relative: 配合absolute/z-index使用 absolute: 相对于祖先中最近一个定位元素（非static）定位 有些浏览器若没有top left会错乱 注意善用百分值和负margin定位 fixed: 相对于viewport 特殊属性除外（transform） sticky: 不常用 2 层叠上下文 元素在z轴的顺序由z-index影响，然而不是由z-index的值决定，应在层叠上下文(stacking context)中考虑。 以下是常见层叠上下文的形成： 根元素html position为absolute或relative并且z-index值不为auto opacity小于1 position为fixed或sticky transform不为none 注：参考 stacking context 考虑层叠上下文时注意： 每个层叠上下文是新的context 处在同一context才能比较 3 浏览器渲染原理 3.1 渲染步骤 浏览器渲染分为六个步骤： 构建DOM 构建CCSOM 合并成渲染树(render-tree) layout paint composite 注：参考 https://csstriggers.com了解CSS特性触发的浏览器渲染过程",
  "url": "https://Mia-zhao.github.io/blog/posts/css-%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%932/",
  "image": "https://Mia-zhao.github.io/blog/images/Cover3.jpg",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://Mia-zhao.github.io/blog/posts/css-%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%932/"
  },
  "description": "这篇博文主要为了个人学习目的，内容包括CSS定位，层叠上下文，浏览器渲染原理以及动画 (transition, animation)。 1 定位 文档流和盒模型讨论的是二维平面的布局，定位讨论的是垂直于平面的z-axis布局。从上到下（或者人眼俯视屏幕的方向）分别是： 内联子元素 浮动元素 块级子元素 边框 背景 position的默认值是static, 其余值有： relative: 配合absolute/z-index使用 absolute: 相对于祖先中最近一个定位元素（非static）定位 有些浏览器若没有top left会错乱 注意善用百分值和负margin定位 fixed: 相对于viewport 特殊属性除外（transform） sticky: 不常用 2 层叠上下文 元素在z轴的顺序由z-index影响，然而不是由z-index的值决定，应在层叠上下文(stacking context)中考虑。 以下是常见层叠上下文的形成： 根元素html position为absolute或relative并且z-index值不为auto opacity小于1 position为fixed或sticky transform不为none 注：参考 stacking context 考虑层叠上下文时注意： 每个层叠上下文是新的context 处在同一context才能比较 3 浏览器渲染原理 3.1 渲染步骤 浏览器渲染分为六个步骤： 构建DOM 构建CCSOM 合并成渲染树(render-tree) layout paint composite 注：参考 https://csstriggers.com了解CSS特性触发的浏览器渲染过程",
  "author": {
    "@type": "Person",
    "name": "Mia Zhao"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mia's Blog Posts",
    "logo": {
      "@type": "ImageObject",
      "url": "https://Mia-zhao.github.io/blog/"
    }
  },
  "datePublished": "2020-08-06T08:59:00Z",
  "dateModified": "2020-08-06T08:59:00Z",
  "articleBody": "\u003cp\u003e这篇博文主要为了个人学习目的，内容包括CSS定位，层叠上下文，浏览器渲染原理以及动画 (transition, animation)。\u003c/p\u003e\n\u003ch2 id=\"1-定位\"\u003e1 定位\u003c/h2\u003e\n\u003cp\u003e文档流和盒模型讨论的是二维平面的布局，定位讨论的是垂直于平面的z-axis布局。从上到下（或者人眼俯视屏幕的方向）分别是：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e内联子元素\u003c/li\u003e\n\u003cli\u003e浮动元素\u003c/li\u003e\n\u003cli\u003e块级子元素\u003c/li\u003e\n\u003cli\u003e边框\u003c/li\u003e\n\u003cli\u003e背景\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003ccode\u003eposition\u003c/code\u003e的默认值是\u003ccode\u003estatic\u003c/code\u003e, 其余值有：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003erelative\u003c/code\u003e: 配合\u003ccode\u003eabsolute\u003c/code\u003e/\u003ccode\u003ez-index\u003c/code\u003e使用\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eabsolute\u003c/code\u003e: 相对于祖先中最近一个定位元素（非\u003ccode\u003estatic\u003c/code\u003e）定位\n\u003cul\u003e\n\u003cli\u003e有些浏览器若没有\u003ccode\u003etop\u003c/code\u003e \u003ccode\u003eleft\u003c/code\u003e会错乱\u003c/li\u003e\n\u003cli\u003e注意善用百分值和负\u003ccode\u003emargin\u003c/code\u003e定位\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003efixed\u003c/code\u003e: 相对于viewport\n\u003cul\u003e\n\u003cli\u003e特殊属性除外（\u003ccode\u003etransform\u003c/code\u003e）\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003esticky\u003c/code\u003e: 不常用\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"2-层叠上下文\"\u003e2 层叠上下文\u003c/h2\u003e\n\u003cp\u003e元素在z轴的顺序由\u003ccode\u003ez-index\u003c/code\u003e影响，然而不是由\u003ccode\u003ez-index\u003c/code\u003e的值决定，应在层叠上下文(stacking context)中考虑。\n以下是常见层叠上下文的形成：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e根元素\u003ccode\u003ehtml\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eposition\u003c/code\u003e为\u003ccode\u003eabsolute\u003c/code\u003e或\u003ccode\u003erelative\u003c/code\u003e并且\u003ccode\u003ez-index\u003c/code\u003e值不为\u003ccode\u003eauto\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eopacity\u003c/code\u003e小于1\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eposition\u003c/code\u003e为\u003ccode\u003efixed\u003c/code\u003e或\u003ccode\u003esticky\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003etransform\u003c/code\u003e不为\u003ccode\u003enone\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cem\u003e注：参考 \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\"\u003estacking context\u003c/a\u003e\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003e考虑层叠上下文时注意：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e每个层叠上下文是新的context\u003c/li\u003e\n\u003cli\u003e处在同一context才能比较\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"3-浏览器渲染原理\"\u003e3 浏览器渲染原理\u003c/h2\u003e\n\u003ch3 id=\"31-渲染步骤\"\u003e3.1 渲染步骤\u003c/h3\u003e\n\u003cp\u003e浏览器渲染分为六个步骤：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e构建DOM\u003c/li\u003e\n\u003cli\u003e构建CCSOM\u003c/li\u003e\n\u003cli\u003e合并成渲染树(render-tree)\u003c/li\u003e\n\u003cli\u003elayout\u003c/li\u003e\n\u003cli\u003epaint\u003c/li\u003e\n\u003cli\u003ecomposite\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e\u003cem\u003e注：参考 \u003ca href=\"https://csstriggers.com\"\u003ehttps://csstriggers.com\u003c/a\u003e了解CSS特性触发的浏览器渲染过程\u003c/em\u003e\u003c/p\u003e\n\u003ch3 id=\"32-更新方式\"\u003e3.2 更新方式\u003c/h3\u003e\n\u003cp\u003e用JavaScript更新样式时有三种更新方式：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eJavaScript/CSS \u0026gt; style \u0026gt; layout \u0026gt; paint \u0026gt; composite 例如：\u003ccode\u003ediv.remove()\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eJavaScript/CSS \u0026gt; style \u0026gt; paint \u0026gt; composite 例如：改变背景颜色\u003c/li\u003e\n\u003cli\u003eJavaScript/CSS \u0026gt; style \u0026gt; composite 例如：\u003ccode\u003etransform\u003c/code\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e\u003cem\u003e注：可以通过浏览器rendering-\u0026gt;paint flashing设置观察元素渲染\u003c/em\u003e\u003c/p\u003e\n\u003ch3 id=\"33-takeaways\"\u003e3.3 Takeaways\u003c/h3\u003e\n\u003cp\u003e依据渲染过程以及更新方式可以对动画进行优化，例如\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e弃\u003ccode\u003eleft\u003c/code\u003e用\u003ccode\u003ewill-change\u003c/code\u003e或\u003ccode\u003etranslate\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eJavaScript优化，如不用\u003ccode\u003esetTimeout\u003c/code\u003e/\u003ccode\u003esetInterval\u003c/code\u003e，用\u003ccode\u003erequestAnimationFrame\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"4-动画\"\u003e4 动画\u003c/h2\u003e\n\u003cp\u003e这里总结用\u003ccode\u003etransition\u003c/code\u003e和\u003ccode\u003eanimation\u003c/code\u003e做动画的方法。两种方法都可以配合元素\u003ccode\u003etransform\u003c/code\u003e使用。\u003c/p\u003e\n\u003ch3 id=\"41-transform属性\"\u003e4.1 \u003ccode\u003etransform\u003c/code\u003e属性\u003c/h3\u003e\n\u003cp\u003e\u003ccode\u003etransform\u003c/code\u003e常用功能：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003etranslate\u003c/code\u003e: 常用\u003ccode\u003etranslateX\u003c/code\u003e \u003ccode\u003etranslateY\u003c/code\u003e \u003ccode\u003etranslate\u003c/code\u003e, 善用百分制表达\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003escale\u003c/code\u003e: 常用\u003ccode\u003escaleX\u003c/code\u003e \u003ccode\u003escaleY\u003c/code\u003e \u003ccode\u003escale\u003c/code\u003e, 放大容易出现模糊\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003erotate\u003c/code\u003e: 常用\u003ccode\u003erotate\u003c/code\u003e \u003ccode\u003erotateX\u003c/code\u003e \u003ccode\u003erotateY\u003c/code\u003e \u003ccode\u003erotateZ\u003c/code\u003e, 可用于360度旋转动画\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eskew\u003c/code\u003e: 用得较少\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e以上可以组合起来使用。\u003c/p\u003e\n\u003ch3 id=\"42-transition法\"\u003e4.2 \u003ccode\u003etransition\u003c/code\u003e法\u003c/h3\u003e\n\u003cp\u003e配合元素\u003ccode\u003etransform\u003c/code\u003e, \u003ccode\u003etransition\u003c/code\u003e可以补充中间帧。用法：\u003ccode\u003etransition: 属性名 时长 过渡方式 延迟\u003c/code\u003e。举例：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003etransition: all 1s linear 400ms\r\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cem\u003e注意：\u003ccode\u003edisplay: none\u003c/code\u003e到\u003ccode\u003edisplay: block\u003c/code\u003e不能过渡\u003c/em\u003e\u003c/p\u003e\n\u003ch3 id=\"43-animation法\"\u003e4.3 \u003ccode\u003eanimation\u003c/code\u003e法\u003c/h3\u003e\n\u003cp\u003e配合\u003ccode\u003e@keyframes\u003c/code\u003e定义关键帧，例如：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e/* @keyframes定义法一 */\r\n@keyframes keyframes1 {\r\n    from {\r\n        transform: scale(1);\r\n    }\r\n    to {\r\n        transform: scale(1.2);\r\n    }\r\n}\r\n\r\n/* @keyframes定义法二 */\r\n@keyframes keyframes2 {\r\n    0% {\r\n        transform: scale(1);\r\n    }\r\n    50% {\r\n        transform: scale(1.2);\r\n    }\r\n    100% {\r\n        transform: scale(1.5);\r\n    }\r\n}\r\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e设置\u003ccode\u003eanimation\u003c/code\u003e, 例如：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003eanimation: 1s keyframes1 infinite;\r\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003ccode\u003eanimation\u003c/code\u003e接受以下参数：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e时长\u003c/li\u003e\n\u003cli\u003e动画名\u003c/li\u003e\n\u003cli\u003e过渡方式\u003c/li\u003e\n\u003cli\u003e延迟\u003c/li\u003e\n\u003cli\u003e次数\u003c/li\u003e\n\u003cli\u003e方向\u003c/li\u003e\n\u003cli\u003e填充模式\u003c/li\u003e\n\u003cli\u003e是否暂停\u003c/li\u003e\n\u003c/ul\u003e"
}
</script>

<link rel="preload" as="script" href="/blog/bundle.js?v=1598028633">


</head>
<body>

  <header id="nav" class="header">
  <div class="ax-l-i max-w-6xl">
    <div class="ax-logo">
      <a class="block" href="/blog/" title="Mia&#39;s Blog Posts"><span class="font-semibold text-raven-900">Mia's Blog Posts</span></a>
    </div>
    <div class="ax-user">
      <a class="p-2 w-8 h-8 block text-raven-500 hover:text-gray-800 focus:text-gray-800 focus:outline-none" target="_blank" rel="noopener nofollow" href="https://www.google.com/search?q=site:https://Mia-zhao.github.io/blog/" title="Search">
        <svg class="fill-current" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M2.67 12.804c0-5.6 4.544-10.134 10.133-10.134s10.134 4.544 10.134 10.134-4.544 10.133-10.134 10.133S2.67 18.393 2.67 12.804zm28.943 16.923l-8.868-8.868c4.287-5.3 3.68-13.012-1.378-17.57S8.564-1.066 3.75 3.75s-5.017 12.558-.46 17.618 12.28 5.665 17.57 1.378l8.868 8.868a1.33 1.33 0 0 0 2.231-.597c.123-.46-.008-.952-.345-1.29h0z"/></svg>

      </a>
    </div>
  </div>

  
</header>

  <main>
<div class="default-single">
  <div class="ax-title ax-l-o">
    <div class="ax-l-i max-w-680">
      <h1 class="post-title font-content-title font-normal leading-tight tracking-default text-40">CSS 知识总结2</h1>

      <div class="ax-meta flex items-center mt-5">
        <div class="flex-grow min-w-0">
          <div class="flex items-center">
  <div class="flex-shrink-0">
    <img
    class="w-12 h-12 sm:w-14 sm:h-14 object-cover p-3px rounded-full border border-blue-300"
    src="/blog/images/author/default.webp"
    alt="Mia Zhao">
  </div>
  <div class="flex-shrink-0 ml-2 leading-tight font-content-sans">
    <a class="block text-sm text-raven-800 hover:text-raven-900 hover:underline focus:underline" target="_blank" rel="noopener nofollow" title="Mia Zhao" href="https://Mia-zhao.github.io/blog/">Mia Zhao</a>
    <time class="text-sm text-raven-500" datetime="2020-08-06T08:59:00Z">Aug 6, 2020 4:59PM</time>
  </div>
</div>

        </div>
        <div>
          <div class="flex items-center">
  <a class="flex-shrink-0 block text-raven-800 hover:text-raven-900" target="_blank" rel="noopener nofollow" title="Share on Twitter" href="https://twitter.com/intent/tweet?text=CSS%20%e7%9f%a5%e8%af%86%e6%80%bb%e7%bb%932%20by%20%40%25%21s%28%3cnil%3e%29%20https%3a%2f%2fMia-zhao.github.io%2fblog%2fposts%2fcss-%25E7%259F%25A5%25E8%25AF%2586%25E6%2580%25BB%25E7%25BB%25932%2f"><svg class="w-6 h-6 fill-current" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M32 6.078c-1.2.522-2.458.868-3.78 1.036 1.36-.812 2.398-2.088 2.886-3.626a13.11 13.11 0 0 1-4.16 1.588C25.742 3.794 24.026 3 22.154 3a6.56 6.56 0 0 0-6.556 6.562c0 .52.044 1.02.152 1.496-5.454-.266-10.28-2.88-13.522-6.862-.566.982-.898 2.106-.898 3.316a6.57 6.57 0 0 0 2.914 5.452 6.48 6.48 0 0 1-2.964-.808v.072c0 3.188 2.274 5.836 5.256 6.446-.534.146-1.116.216-1.72.216-.42 0-.844-.024-1.242-.112.85 2.598 3.262 4.508 6.13 4.57a13.18 13.18 0 0 1-8.134 2.798c-.538 0-1.054-.024-1.57-.1C2.906 27.93 6.35 29 10.064 29c12.072 0 18.672-10 18.672-18.668 0-.3-.01-.57-.024-.848C30.014 8.56 31.108 7.406 32 6.078z"/></svg>
</a>
  <a class="ml-3 flex-shrink-0 block text-raven-800 hover:text-raven-900" target="_blank" rel="noopener nofollow" title="Share on Facebook" href="https://www.facebook.com/dialog/share?app_id=&display=page&href=https%3a%2f%2fMia-zhao.github.io%2fblog%2fposts%2fcss-%25E7%259F%25A5%25E8%25AF%2586%25E6%2580%25BB%25E7%25BB%25932%2f"><svg class="w-6 h-6 fill-current" viewBox="-7 -3.5 39 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M30.234 0H1.765C.8.001 0 .79 0 1.766v28.47C.001 31.2.79 32 1.766 32h15.328V19.625h-4.156V14.78h4.156v-3.564c0-4.134 2.523-6.384 6.21-6.384 1.766 0 3.284.13 3.726.2v4.32h-2.543c-2.006 0-2.394.953-2.394 2.352v3.085h4.797l-.625 4.844h-4.172V32h8.14C31.21 32 32 31.2 32 30.234V1.765C32 .8 31.21 0 30.234 0z"/></svg>
</a>
</div>

        </div>
      </div>
    </div>
  </div>
  <div class="ax-feature ax-l-o">
    <div class="ax-l-i max-w-5xl">

<figure>
<img
class="mb-2 mx-auto leading-none shadow-xl"
src="/blog/images/Cover3.jpg"
alt="CSS 知识总结2">
</figure>

    </div>
  </div><div class="ax-content ax-l-o">
    <div class="ax-l-i max-w-680">
      <article class="cdata">
<p>这篇博文主要为了个人学习目的，内容包括CSS定位，层叠上下文，浏览器渲染原理以及动画 (transition, animation)。</p>
<h2 id="1-定位">1 定位</h2>
<p>文档流和盒模型讨论的是二维平面的布局，定位讨论的是垂直于平面的z-axis布局。从上到下（或者人眼俯视屏幕的方向）分别是：</p>
<ul>
<li>内联子元素</li>
<li>浮动元素</li>
<li>块级子元素</li>
<li>边框</li>
<li>背景</li>
</ul>
<p><code>position</code>的默认值是<code>static</code>, 其余值有：</p>
<ul>
<li><code>relative</code>: 配合<code>absolute</code>/<code>z-index</code>使用</li>
<li><code>absolute</code>: 相对于祖先中最近一个定位元素（非<code>static</code>）定位
<ul>
<li>有些浏览器若没有<code>top</code> <code>left</code>会错乱</li>
<li>注意善用百分值和负<code>margin</code>定位</li>
</ul>
</li>
<li><code>fixed</code>: 相对于viewport
<ul>
<li>特殊属性除外（<code>transform</code>）</li>
</ul>
</li>
<li><code>sticky</code>: 不常用</li>
</ul>
<h2 id="2-层叠上下文">2 层叠上下文</h2>
<p>元素在z轴的顺序由<code>z-index</code>影响，然而不是由<code>z-index</code>的值决定，应在层叠上下文(stacking context)中考虑。
以下是常见层叠上下文的形成：</p>
<ul>
<li>根元素<code>html</code></li>
<li><code>position</code>为<code>absolute</code>或<code>relative</code>并且<code>z-index</code>值不为<code>auto</code></li>
<li><code>opacity</code>小于1</li>
<li><code>position</code>为<code>fixed</code>或<code>sticky</code></li>
<li><code>transform</code>不为<code>none</code></li>
</ul>
<p><em>注：参考 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a></em></p>
<p>考虑层叠上下文时注意：</p>
<ul>
<li>每个层叠上下文是新的context</li>
<li>处在同一context才能比较</li>
</ul>
<h2 id="3-浏览器渲染原理">3 浏览器渲染原理</h2>
<h3 id="31-渲染步骤">3.1 渲染步骤</h3>
<p>浏览器渲染分为六个步骤：</p>
<ol>
<li>构建DOM</li>
<li>构建CCSOM</li>
<li>合并成渲染树(render-tree)</li>
<li>layout</li>
<li>paint</li>
<li>composite</li>
</ol>
<p><em>注：参考 <a href="https://csstriggers.com">https://csstriggers.com</a>了解CSS特性触发的浏览器渲染过程</em></p>
<h3 id="32-更新方式">3.2 更新方式</h3>
<p>用JavaScript更新样式时有三种更新方式：</p>
<ol>
<li>JavaScript/CSS &gt; style &gt; layout &gt; paint &gt; composite 例如：<code>div.remove()</code></li>
<li>JavaScript/CSS &gt; style &gt; paint &gt; composite 例如：改变背景颜色</li>
<li>JavaScript/CSS &gt; style &gt; composite 例如：<code>transform</code></li>
</ol>
<p><em>注：可以通过浏览器rendering-&gt;paint flashing设置观察元素渲染</em></p>
<h3 id="33-takeaways">3.3 Takeaways</h3>
<p>依据渲染过程以及更新方式可以对动画进行优化，例如</p>
<ul>
<li>弃<code>left</code>用<code>will-change</code>或<code>translate</code></li>
<li>JavaScript优化，如不用<code>setTimeout</code>/<code>setInterval</code>，用<code>requestAnimationFrame</code></li>
</ul>
<h2 id="4-动画">4 动画</h2>
<p>这里总结用<code>transition</code>和<code>animation</code>做动画的方法。两种方法都可以配合元素<code>transform</code>使用。</p>
<h3 id="41-transform属性">4.1 <code>transform</code>属性</h3>
<p><code>transform</code>常用功能：</p>
<ul>
<li><code>translate</code>: 常用<code>translateX</code> <code>translateY</code> <code>translate</code>, 善用百分制表达</li>
<li><code>scale</code>: 常用<code>scaleX</code> <code>scaleY</code> <code>scale</code>, 放大容易出现模糊</li>
<li><code>rotate</code>: 常用<code>rotate</code> <code>rotateX</code> <code>rotateY</code> <code>rotateZ</code>, 可用于360度旋转动画</li>
<li><code>skew</code>: 用得较少</li>
</ul>
<p>以上可以组合起来使用。</p>
<h3 id="42-transition法">4.2 <code>transition</code>法</h3>
<p>配合元素<code>transform</code>, <code>transition</code>可以补充中间帧。用法：<code>transition: 属性名 时长 过渡方式 延迟</code>。举例：</p>
<pre><code>transition: all 1s linear 400ms
</code></pre><p><em>注意：<code>display: none</code>到<code>display: block</code>不能过渡</em></p>
<h3 id="43-animation法">4.3 <code>animation</code>法</h3>
<p>配合<code>@keyframes</code>定义关键帧，例如：</p>
<pre><code>/* @keyframes定义法一 */
@keyframes keyframes1 {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}

/* @keyframes定义法二 */
@keyframes keyframes2 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1.5);
    }
}
</code></pre><p>设置<code>animation</code>, 例如：</p>
<pre><code>animation: 1s keyframes1 infinite;
</code></pre><p><code>animation</code>接受以下参数：</p>
<ul>
<li>时长</li>
<li>动画名</li>
<li>过渡方式</li>
<li>延迟</li>
<li>次数</li>
<li>方向</li>
<li>填充模式</li>
<li>是否暂停</li>
</ul>

      </article>
      

      

    </div>
  </div>
</div>

  </main>
  <footer class="footer">
  <div class="ax-l-i max-w-6xl">
    <nav class="flex items-center justify-center">
    </nav>

    <div class="footer-copyright text-sm text-center text-gray-500 mt-4">
      &#169; -2020 Mia&#39;s Blog Posts
    </div>
    <div class="text-sm sm:text-xs text-center text-gray-500 mt-2">
      Powered by <a href="https://www.axiomtheme.com/?utm_source=theme-footer&utm_medium=website&utm_campaign=referral">Axiom</a>
    </div>
  </div>
</footer>

<script src="/blog/bundle.js?v=1598028633"></script>


</body>
</html>
